import React from 'react'
import {
  View,
  Text,
  TouchableOpacity
} from 'react-native'

import { observer } from 'mobx-react-lite'
import { Snackbar } from '../views'
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs'
import { useStores } from '../stores'

export default observer(() => {
  const height = useBottomTabBarHeight()
  const { appearance: ap } = useStores()
  return (
    <View style={{...styles.container, backgroundColor: ap.theme.background}}>
      <TouchableOpacity onPress={() => {
        Snackbar.info({
          statusBarBackgroundColor: ap.theme.background,
          children: (
            <View style={{flex:1, flexDirection: 'row'}}>
              <View style={{flex: 1, backgroundColor: 'honeydew', alignItems:'center'}}><Text>1</Text></View>
              <View style={{flex: 2, backgroundColor: 'dodgerblue', alignItems: 'center'}}><Text>2</Text></View>
              <View style={{flex: 1, backgroundColor: 'lightcoral', alignItems: 'center'}}><Text>3</Text></View>

            </View>
          )
        })
      }}>
        <Text style={{color: ap.theme.second}}>Look</Text>
        <TouchableOpacity onPress={() => ap.switchTheme()}>
          <Text style={{color: ap.theme.active}}>Switch theme</Text>
        </TouchableOpacity>
      </TouchableOpacity>
    </View>
  )
})

const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
}